<template>
	<!-- 补贴 -->
	<view class="bigbox">
		<!-- 头部盒子 -->
		<view class="box-t h260 mt34 flex row-around col-center">
			<!-- 左边的盒子 -->
		<!-- 	<view class="box-t-l flex1">
				<view class="box-t-l-num mb52">
					{{num}}
				</view>
				<view class="box-t-l-txt ">
					邀请好友
				</view>
			</view> -->
			<!-- /左边的盒子 -->
			<!-- <view class="line">

			</view> -->
			<!-- 右边的盒子 -->
			<view class="box-t-l flex1 ">
				<view class="box-t-l-num mb52">
					￥{{sum_subsidy}}
				</view>
				<view class="box-t-l-txt ">
					补贴总收入
				</view>
			</view>
			<!-- /右边的盒子 -->
		</view>
		<!-- /头部盒子 -->

		<!-- 筛选盒子 -->
		<view class="flex col-center row-between pt20">
			<text class="flex1 tit">历史记录</text>
			<lauwen-select :options="options" :defaultIndex="'1'" :height="31" :padding="15" :fontSize="'24rpx'"
				@getValue="getValue"></lauwen-select>
		</view>
		<!-- 筛选盒子 -->
		<u-empty text="暂无记录" marginTop="100" v-if="!list.length"></u-empty>
		<view class="mt26 boxr pl22 pr22">
			<block v-for="(item,i) in list" :key='i'>
				<view class="bannerboxList flex row-between h146 pr40 pb30 pl60 pt36">
					<view class="boxList-r flex1 flex row-column row-between">
						<!-- 右边上面的盒子 -->
						<view class="boxList-r-t  flex row-between">
							<text class="boxList-r-id">{{item.remark}}</text>
							<view class="boxList-r-m">
								<text class="boxListNum">￥{{item.account}}</text>
							</view>
						</view>
						<!-- 右边下面的盒子 -->
						<view class="boxList-r-b flex row-between">
							<text class="boxList-s">{{item.createtime}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>

	</view>
</template>

<script>
	import lauwenSelect from "@/components/lauwen-select/lauwenSelect.vue"
	export default {
		name:'mySubsidy',
		components: {
			lauwenSelect
		},
		data() {
			return {
				value1: '',
				options: {
					'1': "七天内",
					'2': "15天内",
					'3': "30天内",
				},
				//邀请人数
				sum_subsidy:uni.getStorageSync('userInfo').sum_subsidy,
				
				query:{
					//用户id
					// id:uni.getStorageSync('userInfo').id,
					//页码值
					page:1,
					size:10,
					type:1
				},
				//数据列表
				list:[],
				//总收入
				moneysum:''
			};
		},
		onLoad() {
			this.getsubsidysList()
		},
		methods: {
			//获取佣金详情
			async getsubsidysList() {
					const res = await this.$api.subsidysList(this.query)
					console.log('111',res)
					this.list=[...this.list,...res.data.data] 
					this.moneysum=res.data.moneysum
			},
			getValue(e) {
				console.log(e)
				this.query.type=e
				this.query.page=1
				this.list=[]
				this.getsubsidysList()
			}
		},
		onReachBottom() {
			this.query.page++
			this.getsubsidysList()
			// console.log(222)
		}
	}
</script>

<style lang="scss">
	.box-t {
		position: relative;
		height: 260rpx;
		width: 100%;
		// background: url('/static/img/index/15邀请-背景4.png') no-repeat;
		// background-size: 100% 100%;
		background: linear-gradient(270deg, #F93829, #FF833F);
		border-radius: 14rpx;

		.box-t-l {
			text-align: center;

			.box-t-l-num {
				font-size: 66rpx;
				font-family: DIN;
				font-weight: bold;
				color: #FFFFFF;
			}

			.box-t-l-txt {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.line {
		width: 2rpx;
		height: 146rpx;
		background: #FFFFFF;
		opacity: 0.3;
		border-radius: 0px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
	}

	.tit {
		font-size: 30rpx;
		color: #0C162E;
	}

	.bannerboxList {
		border-bottom: 2rpx solid #D2DEEB;
		;

		.boxList-l {
			.avatar {
				border-radius: 50%;
			}
		}

		.boxList-r {
			.boxList-r-t {
				.boxList-r-id {
					font-size: 26rpx;
					color: #0C162E;
				}

				.boxList-r-m {

					text,
					.boxListNum {
						font-size: 24rpx;
						font-weight: 500;
						color: #6D788B;
					}

					.boxListNum {
						color: #FF2E6D;
					}
				}
			}

			.boxList-r-b {
				.boxList-s {
					font-size: 24rpx;
					font-weight: 500;
					color: #6D788B;
				}
			}
		}
	}

	.bannerboxList:last-child {
		border-bottom: none;
	}
</style>
